smooth-scrollbar

smooth-scrollbar

Customize scrollbar in modern browsers with smooth scrolling experience.

Browser Compatibility

Browser	Version
IE	10+
Chrome	22+
Firefox	16+
Safari	8+
Android Browser	4+
Chrome for Android	32+
iOS Safarri	7+

Install

Via npm:

npm install smooth-scrollbar --save

Via bower:

bower install smooth-scrollbar --save

Demo

http://idiotwu.github.io/smooth-scrollbar/

Why is native scrolling slow?

As is explained in this article, browser repaint every frame in scrolling. Less painting is better.

To avoid repainting, I use translate3d in scroll content to create composite layers and force hardware accelerating.

Usage

Smooth scrollbar is defined as an UMD module which named Scrollbar, you can use any loader to load it:

import Scrollbar from 'smooth-scrollbar';

Or get it from window object:

const { Scrollbar } = window;

Don't forget to include the stylesheet in your page:

<link rel="stylesheet" href="dist/smooth-scrollbar.css">

Here's three way to tell the plugin which element should be a smooth scrollbar:

• As an element:

  <scrollbar>
      ...
  </scrollbar>
  

• As an attribute:

  <section scrollbar>
      ...
  </section>
  

• As a data attribute

  <section data-scrollbar>
      ...
  </section>
  

Then init all scrollbars:

Scrollbar.initAll(options);

Or you can call Scrollbar.init(elem, options) to manually init the scrollbar.

Available Options for Scrollbar

parameter	type	default	description
speed	Number	1	Scrolling speed scale.
fricton	Number	10	Scrolling fricton, a percentage value within (1, 100)
inflection	Number	10	When scrolling speed is lower than infleciton point, sensitivity will be scaled to 10x.
sensitivity	Number	0.1	Wheel sensitivity, lower is accurate.

Confusing with the option field? Try editor tool here!

DOM Structure

Following is the DOM structure that Scrollbar generated:

<scrollbar>
    <article class="scroll-content">
        your content here
    </article>
    <aside class="scrollbar-track scrollbar-track-x">
        <div class="scrollbar-thumb scrollbar-thumb-x"></div>
    </aside>
    <aside class="scrollbar-track scrollbar-track-y">
        <div class="scrollbar-thumb scrollbar-thumb-y"></div>
    </aside>
</scrollbar>

APIs

• Scrollbar API Documents
• Instance API Documents

Scrollbar

• Scrollbar.init( element, [options] )
• Scrollbar.initAll( [options] )
• Scrollbar.has( element )
• Scrollbar.get( element )
• Scrollbar.getAll()
• Scrollbar.destroy( element )
• Scrollbar.destroyAll()

Instance

• instance#update( [async] )
• instance#getSize()
• instance#setPosition( x, y )
• instance#scrollTo( x, y, [duration], [callback] )
• instance#addListener( fn )
• instance#removeListener( fn )
• instance#infiniteScroll( callback, [threshold] )
• instance#destroy()
• instance#getContentElem()
• instance#showTrack( direction )
• instance#hideTrack()

Work with RubaXa/Sortable

Details here.

Related

• angular-smooth-scrollbar

Todo

• text selection with scrolling on touch screens.

License

MIT.

Changelog

3.1.0

• Use quadratic curve to perform scrollTo method.